從頭開始的Javascript 入門 -物件 day5

Object-Oriented Programming 物件導向程式設計

OOP 是一種程式設計方法
先講個補充事件來聽聽看吧？
物件？房子？

簡單來講：

物件(Object) = 屬性(Property) + 行為(Behavior)

小明 這個人 代表物件 ，他的名字 性別 膚色 衣服穿什麼
這都代表他的屬性，而當小明會有吃飯 講話 睡覺 這些行為就是他的動詞。

var obj ={
    a:'hello world',
    b:42,
    c:true

};
obj.a;   // "hello world"
obj.b;  //   42
obj.c; //    true
// 同等於
obj["a"]   // "hello world"
obj["b"];  //   42
obj["c"]; //    true

以圖像來表現就是

物件的特性表現方式：

• 點記號法 ：obj.a 特性存取（property access）
• 方括號法 ：obj["a"] 鍵值存取（key access），意即 [ ]

因為點記號比較短，容易閱讀，所以盡量優先使用它

以上圖來說

屬性： 
  名稱：cat,
  年齡：4,
  貓色：花色
行為：
  吃飯,
  睡覺,
  玩

另外一種定義方式：

var cat =new Object();
cat.name ='cat';
cat.LastName ='cho';
cat.age =4;

console.log(cat);

如何添加數組到和function 到objects

var cat ={
    age:5,
    name:"cat",
    job:"loser",
    family:["dad", "mom" ,"kelly"],
    calculate: function yearOfBirth(myage){
       return 2017 -myage;
    }

};

console.log(cat.family[1]) // mom
console.log(cat.calculate(10)) // 2007

OOP 特性 ：

1. 封裝 對於使用者(指的是你用他人寫好的api)而你不需要了解他的實作怎麼去做，你只要知道怎麼用就行了
   你知道貓會叫但怎麼叫 你不會知道
   你知道使用遙控器要做什麼，但怎麼使用原理你不會知道
2. 繼承
   爸爸有的，兒子一旦繼承了也會有，爸爸有的你不但擁有，還可以加上兒子自己的東西。好處是可以減少重覆撰寫相同的程式碼，也可以限制兒子需要實作什麼方法(Method)

• 可以把共同的屬性或行為定義在上一層
  我們都會吃東西，貓跟狗都會吃東西。屬於動物那一塊。

為什麼我們需要 OOP ：

用「擬人化」或「擬物化」的方式
來看待程式碼
使程式碼更好管力

使用一些包含特殊字符或動態產生的字串作為屬性名稱，就必須使用鍵值存取 [ ] 的方式。

包含特殊字符的屬性名稱。

const obj = {
  '!!12345!!': 'Hello World',
};

obj.!!12345!! // Uncaught SyntaxError: Unexpected token !
obj['!!12345!!'] // "Hello World"

函式構建式

參考以下文章：
https://wcc723.github.io/javascript/2017/12/18/javascript-constructor/

肚子餓 想到傳統雞蛋糕 會有很多模板 卡拉赫拉 比卡丘 等等
首先製作一個烤盤模型如下：

function CuteAnimation(name, skill) {
 this.name = name;
 this.skill = skill;
}

var pikachu = new CuteAnimation("⽪卡丘","⼗萬伏特");

var frog = new CuteAnimation("妙蛙種⼦","藤鞭");


var turtle = new CuteAnimation("傑尼⿔","⽔槍");


console.log(pikachu.name); // 印出 "⽪卡丘"
console.log(turtle.skill); // 印出 "⽔槍"
console.log(frog.skill); // 印出 "藤鞭"

我們都是用同一烤盤，同一模型但烤出來是不一樣的東西，
烤盤就像是建模的模組，但出來的東西會不一樣。